<template>
  <div class="mango">
    <!-- <h1>{{ msg }}</h1> -->
    <div class="nav">
      <ul>
        <li :class="{'on': defaultSelect == index}" v-for="(item,index) in tabList" :key="index"
          @click="funcSelectTab(index)"
        >{{item}}</li> 
      </ul>
    </div>
    <div class="content">
      <div class="card_list">
        <div class="card"  v-show="index === defaultSelect" v-for="(webItem, index) in pageCardList" :key="index">
          <h3 class="card_title">{{webItem.tabName}}</h3>
          <ul class="cards_item">
            <li v-for="(item, index) in webItem.webs" :key="index">
                <a :href="item.webUrl" target="_blank">
                  <img  class="cards_item_d_logo" v-if="item.logo" :src="item.logo" :alt="item.name" :height="item.logoH">
                  <div class="cards_item_d_right">
                    <span class="cards_item_d_name">{{item.name}}</span>
                    <p class="cards_item_d_desc">{{item.desc}}</p>
                  </div>
                  
                </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MangoWeb",
  props: {
    msg: String,
  },
  data(){
    return{ 
      defaultSelect: 0,
      tabList: [],
      pageCardList:[]
    }
  },
  created(){
      this.$axios({
          method:'get',
          url:'/json/web.json',
           
      }).then((response) =>{          //这里使用了ES6的语法
          console.log(response.data.data)       //请求成功返回的数据
          let data = response.data.data.webUrlList;
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            this.tabList.push(element.tabName)
          }
          this.pageCardList = data;

      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
  },
  methods:{
    funcSelectTab(index) {
      this.defaultSelect = index;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav ul{
  width: 100px;
  margin: 0 auto;
  height: 100%; 
  padding-top: 50px;
  float: left;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  box-shadow: 0 2px 4px 0 rgb(85 85 85 / 25%);
  -webkit-font-smoothing: antialiased;
}
.nav li {
  font-size: 16px; 
  opacity: .8;
  cursor:default;
  height: 60px;
  line-height: 60px;
  border-bottom: #c8c9cb solid 1px;
}
.nav li.on{
  opacity: 1;
  border-right: #858585 solid 2px;
  font-weight: 700;
}
.content{
  margin-top: 46px;
  margin-left: 100px;
}
.card_list{
  
}
.card_list .card{
  width: 80%;
  margin: 0 auto;
  
}
.card_list .card .card_title{
  font-size: 24px; 
  font-weight: 500; 
  margin-right: 20px;
  border-bottom: #1a1b1b solid 1px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.card_list .card .cards_item{
   
}
.card_list .card .cards_item li{
   width: 45%;
   min-height: 200px;
   float: left;
   padding-right: 5%;
   /* border-bottom: 1px dotted #ddd; */
   padding-bottom: 20px;
}
.card_list .card .cards_item li a{
   width: 100%;
   display: inline-block;
   height: 30px;
   line-height: 35px;
   text-align: left;
}
.card_list .cards_item_d_name{
  font-size: 20px;
  height: 30px;
  line-height: 50px;
  font-weight: 500;
  display: inline-block;
  color: rgb(15, 10, 10);
}
.card_list .cards_item_d_logo{ 
  margin-right: 10px;
  float: left;
}
.cards_item_d_right{
 
}
.card_list .cards_item_d_desc{
  padding-top: 20px;
  font-size: 14px;
}
</style>
